import {Button, message, Table} from "antd";
import React, {useState} from "react";
import {ColumnsType} from "antd/es/table";
import {ArticleDataType, LiteratureDataType, MetaType} from "../../util/publicType";
import {AxiosResponse} from "axios";
import {cancelRelationArticle, cancelRelationLiterature, relationArticle, relationLiterature} from "../../api";

interface Props {
    // 分页
    meta: MetaType,
    // 更改页
    setPage: (page: number) => void,
    // 更改页数
    setSize: (size: number) => void,
    // 页改变重新请求
    getData: (page: number, size: number, name: string | null) => void,
    // 拿数据
    data: LiteratureDataType[] | ArticleDataType[],
    isArticle?: boolean,
    // 区域字典id
    dictId: string,
    isRelation?: boolean,
    title?: string
}

const RegionTable = React.memo(({

                                    meta,
                                    setPage,
                                    setSize,
                                    getData,
                                    data,
                                    isArticle = true,
                                    dictId,
                                    isRelation = false,
                                    title,
                                }: Props) => {
    const columns: ColumnsType<LiteratureDataType | ArticleDataType> = [
        {
            title: "名字",
            dataIndex: "name",
            key: "name",
            align: "center",
            width: "18%"
        },
        {
            title: "阅读数",
            dataIndex: "visit_num",
            key: "visit_num",
            align: "center"
        },
        {
            title: "所属字典",
            dataIndex: "dictName",
            key: "dictName",
            align: "center"
        },
        {
            title: "操作",
            dataIndex: "id",
            key: "id",
            align: "center",
            render: (v: string) => {
                return (
                    <>
                        {
                            isRelation ? <Button type="primary" onClick={() => relationClick(v)}>关联</Button> :
                                <Button type="primary" onClick={() => cancelClick(v)}>取消关联</Button>
                        }
                    </>
                )
            }
        }
    ];

    // 关联操作
    const relationClick = (id: string) => {
        let request: Promise<AxiosResponse>;
        if (title === "关联文章") {
            request = relationArticle(dictId, {article_id: id});
        } else {
            request = relationLiterature(dictId, {literature_id: id})
        }
        request.then(() => {
            message.success("关联成功").then(() => {
                window.location.reload();
            })
        }, err => message.error(err))
    }

    const cancelClick = (id: string) => {
        let request: Promise<AxiosResponse>;
        if (isArticle) {
            request = cancelRelationArticle(id);
        } else {
            request = cancelRelationLiterature(id);
        }
        request.then(() => {
            message.success("已取消关联").then(() => {
                window.location.reload();
            })
        }, err => message.error(err));
    }
    return (
        <Table columns={columns} dataSource={data} pagination={
            {
                current: meta.currentPage,
                defaultCurrent: meta.currentPage,
                defaultPageSize: meta.perSize,
                pageSize: meta.perSize,
                showQuickJumper: true,
                showSizeChanger: true,
                showTotal: (t: number) => `总条数${t}`,
                total: meta.total,
                onChange: (page: number, perSize: number) => {
                    setPage(page)
                    setSize(perSize);
                    getData(page, perSize, null);
                }
            }
        }/>
    )
})
export default RegionTable;